import {
  Button,
  Grid,
  Layout,
  List,
  Result,
  Spin,
} from '@arco-design/web-react';
import useMoviesState from './MoviesViewModel';
import { useNavigate } from "react-router-dom";

const Row = Grid.Row;
const Col = Grid.Col;

function MoviesScreen() {
  const { state, refreshData, loadMovieDetails } = useMoviesState();
  const { movies, loading, error } = state;
  const navigate = useNavigate(); // 使用 useNavigate
  const renderContent = () => {
    if (loading) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <Spin />
        </div>
      );
    }
    if (error) {
      return (
        <Result
          status="403"
          subTitle="Access to this resource on the server is denied."
        />
      );
    }
    return (
      <List
        size="default"
        header="电影列表"
        dataSource={movies?.movies}
        render={(item, index) => (
          <List.Item
            key={index}
            onClick={() => navigate(`/movies/${item.title}`)}
          >{`名称：${item?.title}  年份：${item?.releaseYear}`}</List.Item>
        )}
      />
    );
  };

  return (
    <Layout>
      {renderContent()}
      <Row>
        {' '}
        <Button type="primary" style={{ marginTop: 20 }} onClick={refreshData}>
          刷新
        </Button>
      </Row>
    </Layout>
  );
}

export default MoviesScreen;
